<template>
  <el-container>
	<el-header>
		<el-row :gutter="24">
            <el-col :span="4">
		        <el-input placeholder="请输入姓名查询" prefix-icon="el-icon-search" v-model="input" clearable/>
            </el-col>
            <el-col :span="20">
		        <span style="align-items: center;">张三</span>
            </el-col>
        </el-row>
	</el-header>
	<el-container>
		<el-aside>
            <div class="userList">
                <el-col :span="24" v-for="(item, index) in 18" :key="index">
                    <el-card shadow="never" style="height: 80px;">
                        <img src="@/assets/images/profile.jpg" width="20%">
                        <span>{{index}}</span>
                    </el-card>
                </el-col>
            </div>
		</el-aside>
		<el-container>
			<el-main>
                
			</el-main>
			<el-footer>
                
			</el-footer>
		</el-container>
	</el-container>
</el-container>
</template>

<script>
export default {
  data() {
    return {
      input: "",
    };
  },
};
</script>
<style>

.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
  background-color: rgb(238, 241, 246);
  padding: 0;
  position: relative;
  width: 17%;
}
.userList {
    height: 55%;
    overflow-y: auto;
}
</style>
